<template>
    <div class='container'>
        <div class="search-container">
            <t-input placeholder="请输入音乐名称" v-model="music_name" @enter="handleSearch" />
        </div>
        <div class='btn-container'>
            <t-button v-for="item in music_btn_info" :key="item.plateform" :href="item.url" target="_blank">
                {{ item.plateform }}
            </t-button>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { MessagePlugin } from 'tdesign-vue-next';
import { ref, computed } from 'vue';

const music_name = ref('');

// 使用 computed 实现响应式更新
const music_btn_info = computed(() => [
    { plateform: '豆瓣', url: `https://search.douban.com/music/subject_search?search_text=${encodeURIComponent(music_name.value)}` },
    { plateform: '网易', url: `https://music.163.com/#/search/m/?s=${encodeURIComponent(music_name.value)}` },
    { plateform: 'QQ', url: `https://y.qq.com/n/ryqq/search?w=${encodeURIComponent(music_name.value)}` },
    { plateform: '酷狗', url: `https://www.kugou.com/yy/html/search.html#searchType=song&searchKeyWord=${encodeURIComponent(music_name.value)}` },
    { plateform: '咪咕', url: `https://music.migu.cn/v5/#/playlist?search=${encodeURIComponent(music_name.value)}` },
    { plateform: '百度', url: `https://music.91q.com/search?word=${encodeURIComponent(music_name.value)}` },
    { plateform: 'B站', url: `https://search.bilibili.com/all?keyword=${encodeURIComponent(music_name.value)}` },
]);

// 可选：处理回车搜索
const handleSearch = () => {
    MessagePlugin.info(`全平台搜索音乐：【${music_name.value}】`);
    for (const item of music_btn_info.value) {
       window.open(item.url, '_blank');
    }
};
</script>

<style lang='scss' scoped>
.container {
    width: 60%;
    margin: 0 auto;
}

.btn-container {
    margin: 10px 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}
</style>